<!--
 * @Description: 个人中心
 * @Author: 老五 13521685612@163.com
 * @Date: 2024-11-03 00:41:09
 * @LastEditors: 老五 13521685612@163.com
 * @LastEditTime: 2024-11-07 23:59:30
 * @FilePath: /lieshou-app/pages/page_test.vue
-->

<template>
	<view class="content">
		<!-- 1 -->
		<z-paging ref="paging">
			<view slot="top">
				<uni-nav-bar title="我的" statusBar='true'
					background-color='linear-gradient(to right,rgba(255, 145, 200, 0), rgba(219, 188, 253, 0))'></uni-nav-bar>
			</view>
			<!-- 会员 -->
			<zUserCard :is-card='isCard'  :card-ins='cardIns' :user-info='userInfo' @getAvatar="getAvatar"></zUserCard>
			<!-- 菜单栏 -->
			<zMenuList :card-list='cardList' :is-card='isCard' @getopen='getopen'></zMenuList>
		</z-paging>
	</view>
</template>

<script>
	import zMenuList from '@/components/z-menu-list.vue'
	import zUserCard from '@/components/z-user-card.vue'
	export default {
		components: {
			zMenuList,
			zUserCard
		},
		data() {
			return {
				// 是否开通会员
				isCard: true,
				// 用户信息
				userInfo: {
					avatarUrl: 'https://img.js.design/assets/img/5fe2c34f85f6379fa22d6652.png',
					nickname: '老五'
				},
				cardIns: {
					cardLevear: ['猎手大会员', '社交脱单', '亲密关系', '婚姻家庭会员']
				},
				// 会员模块
				cardList: [{
						name: '猎手脱单会员',
						title: '48节脱单主题课程免费听',
						background: 'linear-gradient(93.89deg, rgba(239, 240, 251, 1) 0%, rgba(229, 215, 254, 1) 48.17%, rgba(171, 195, 255, 1) 100%)'
					},
					{
						name: '亲密关系会员',
						title: '48节恋爱经营课程免费听',
						background: 'linear-gradient(93.89deg, rgba(248, 225, 228, 1) 0%, rgba(248, 224, 227, 1) 100%)'
					},
					{
						name: '婚姻家庭会员',
						title: '48节婚姻经营课程免费听',
						background: 'linear-gradient(93.89deg, rgba(250, 234, 192, 1) 0%, rgba(254, 251, 236, 1) 100%)'
					}
				]
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.$utils.showShare('分享免费学习的平台给你~ ', '', 'https://img.js.design/assets/img/66a939f9cb8cbd1e8622a19c.jpg')
			// #endif
		},
		methods: {
			// 二级页面
			getopen() {
				this.$utils.showToast('正在开发中～', 1000)
				
			},
		}

	}
</script>

<style lang="scss">
	page {
	
		background-image: url('https://1257557568.vod-qcloud.com/d34b21d5vodcq1257557568/7b1391ad1397757896686948962/ERawiiRPGZkA.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.content {
		width: 100%;
		height: 100%;
	}
</style>